<template>
    <div
        id="askForm"
        class="ask"
        :class="{ 'ask-focus': formAnimation }"
        @click.stop="isAsk(true, false)"
    >
        <div class="ask-input">
            <el-input
                ref="askTextarea"
                class="textarea"
                type="textarea"
                placeholder="请简述您的问题（至少10个字）,以便老师快速了解您的情况。"
                v-model="textarea"
                maxlength="300"
                resize="none"
                show-word-limit
                @focus="change"
            >
            </el-input>
        </div>

        <el-collapse-transition>
            <div v-show="formShow">
                <div class="h2">
                    添加标签<span style="padding-left: 5px; color: #ff6161"
                        >请注意，最多只能选择三个标签</span
                    >
                </div>
                <div class="tags">
                    <div
                        v-for="(item, index) in tags"
                        :key="index"
                        class="tag"
                        :class="{ 'tag-active': tagsCurrent.includes(item.id) }"
                        @click="clickTag(item)"
                    >
                        {{ item.name }}
                    </div>
                </div>
                <div class="h2">添加照片</div>
                <el-upload
                    class="file-uploader"
                    :action="imgUploadUrl"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :before-upload="beforeUpload"
                    :on-success="onSuccess"
                    :on-remove="onRemove"
                    :headers="headers"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>

                <template
                    v-if="userInfo && userInfo.is_gpt_vip == 0 && isOpenDay"
                >
                    <div class="cell-title">支付方式</div>
                    <div class="fff-cell" style="background-color: transparent">
                        <div class="label">
                            <img
                                src="~/assets/images/userCenter/coupon.png"
                                alt=""
                            />优惠券
                            <span class="text1"
                                >（{{ couponList.length }}张可用）</span
                            >
                            <span class="text2"
                                >默认选择剩余有效期最短的优惠券</span
                            >
                        </div>

                        <div class="new-coupon-list">
                            <div
                                v-for="(item, index) in getcouponList"
                                :key="index"
                                class="new-coupon-item"
                                @click="couponClick(item, index)"
                            >
                                <template v-if="item.type == 1">
                                    <img
                                        v-if="checkIndex != index"
                                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/ask-coupon2.png"
                                        class="no-s"
                                        alt=""
                                    />
                                    <div class="big-img" v-else>
                                        <img
                                            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/ask-coupon2-s.png"
                                            class="s"
                                            alt=""
                                        />
                                    </div>
                                </template>
                                <template v-else>
                                    <div
                                        v-if="checkIndex != index"
                                        class="coupon-imgbox"
                                    >
                                        <img
                                            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/ask-coupon4-t.png"
                                            class="no-s"
                                            alt=""
                                        />
                                        <div>{{ item.endtime_text }}到期</div>
                                    </div>
                                    <div class="big-img" v-else>
                                        <img
                                            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/ask-coupon4-s.png"
                                            class="s"
                                            alt=""
                                        />
                                        <div>{{ item.endtime_text }}到期</div>
                                    </div>
                                </template>
                            </div>
                            <div
                                v-if="couponList.length > 3"
                                class="coupon-more"
                                @click="
                                    couponListMoreShow = !couponListMoreShow
                                "
                            >
                                {{ couponListMoreShow ? "更多" : "收起" }}
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </el-collapse-transition>

        <div class="ask-but">
            <div class="button" @click="submitAsk">提交问答</div>
        </div>

        <el-image
            class="my-img"
            v-show="false"
            ref="myImg"
            src=""
            :preview-src-list="previewList"
        >
        </el-image>
    </div>
</template>

<script>
import {
    getlabel_chat,
    get_activity_label,
    addQuizSubmit_chat,
    get_major_detail,
    getquizcount_chat,
} from "@/assets/api/csjhApi";
import { getCouponList } from "@/assets/api/userCenterApi";

import { mapState, mapMutations } from "vuex";
import axios from "axios";
export default {
    name: "fastAsk",
    props: {
        show: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
        animationShow: {
            type: Boolean,
            default: () => {
                return false;
            },
        },
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
        //上传图片的请求头
        headers() {
            return {
                token: this.userInfo ? this.userInfo.token : "",
            };
        },
        getcouponList: function () {
            if (this.couponList.length > 3 && this.couponListMoreShow) {
                return [
                    this.couponList[0],
                    this.couponList[1],
                    this.couponList[2],
                ];
            } else {
                return this.couponList;
            }
        },
        isOpenDay: function () {
            const today = new Date();
            const dayOfMonth = today.getDate();
            return dayOfMonth != 15;
        },
    },
    data() {
        return {
            textarea: "", // 提问内容
            imgUploadUrl: "", // 上传图片接口地址
            imageUrl: "", // 图片上传后地址
            tags: [],
            tagsCurrent: [],
            formShow: false,
            formAnimation: false,
            images: [],

            previewList: [],

            count: "",

            isUpload: false,

            switchSbmit: true,

            couponList: [],
            checkIndex: null,
            couponListMoreShow: true,
            payType: 0,
        };
    },
    mounted() {
        this.imgUploadUrl = axios.defaults.baseURL + "/api/common/upload";
        this.formShow = this.show;
        this.formAnimation = this.animationShow;
        this.getlabel_chat();
        // this.getquizcount_chat();
        if (localStorage.getItem("token")) this.getCouponList();
    },
    methods: {
        ...mapMutations("common", ["setloginShow"]),
        async getquizcount_chat() {
            const res = await getquizcount_chat({});
            if (res.code == 1) {
                this.count = res.data;
            }
        },

        isAsk(is, is2) {
            if (!this.formShow && is) {
                this.$refs.askTextarea.focus();
                document.querySelector("#askForm").scrollIntoView({
                    block: "center",
                    behavior: "smooth",
                });
            }
            this.formShow = is;
            this.formAnimation = is2;
        },
        // 提交提问 addQuizSubmit_chat
        async submitAsk() {
            if (this.textarea.length < 11) {
                this.$alert("请您详细描述您的问题，不得低于10个字。", "提示", {
                    confirmButtonText: "确定",
                });
                this.switchSbmit = true;
                return;
            }
            if (this.isUpload) {
                this.$alert("请等待图片上传成功", "提示", {
                    confirmButtonText: "确定",
                });
                this.switchSbmit = true;
                return;
            }
            if (!this.textarea) {
                this.$alert("提问不能为空", "提示", {
                    confirmButtonText: "确定",
                });
                this.switchSbmit = true;
                return;
            }
            if (!this.formShow) {
                this.isAsk(true, false);
                return;
            }
            let couponList = this.couponList;
            let checkIndex = this.checkIndex;

            // if (this.userInfo.is_gpt_vip != 0) {
            //     this.pay();
            //     return;
            // }
            // if (
            //     couponList.length == 0 &&
            //     this.payType == 0 &&
            //     this.userInfo.is_gpt_vip == 0
            // ) {
            //     this.$confirm(
            //         " 该功能为会员专享，非会员可查阅精选问题",
            //         "提示",
            //         {
            //             distinguishCancelAndClose: true,
            //             confirmButtonText: "开通会员",
            //             cancelButtonText: "去查询",
            //         }
            //     )
            //         .then(() => {
            //             this.set_payVipShow(true);
            //         })
            //         .catch((action) => {
            //             if (action === "cancel") {
            //                 this.$router.push({
            //                     path: "/cswd/jxhd/1",
            //                 });
            //             }
            //         });
            //     return;
            // }
            this.pay();
        },

        // 支付回调
        async pay() {
            if (!this.switchSbmit) return;
            this.switchSbmit = false;
            if (this.isUpload) {
                this.$alert("请等待图片上传成功", "提示", {
                    confirmButtonText: "确定",
                });
                this.payShow = false;
                this.switchSbmit = true;
                return;
            }
            if (!this.textarea) {
                this.$alert("提问不能为空", "提示", {
                    confirmButtonText: "确定",
                });
                this.payShow = false;
                this.switchSbmit = true;
                return;
            }
            let askFormData = {
                title: this.textarea,
                info_images: this.images,
                label_id: this.tagsCurrent.join(","),
                type: 2,
            };
            if (
                this.checkIndex != null &&
                this.payType == 0 &&
                this.userInfo.is_gpt_vip == 0
            ) {
                askFormData.coupon_id = this.couponList[this.checkIndex].id;
            }

            const res = await addQuizSubmit_chat(askFormData);
            this.switchSbmit = true;
            if (res.code == 1) {
                this.payShow = false;
                this.$router.push({
                    path: `/chat/${res.data}`,
                });
            }
        },

        // 点击标签
        clickTag(item) {
            let index = this.tagsCurrent.indexOf(item.id);

            if (index !== -1) {
                this.tagsCurrent.splice(index, 1);
                return;
            }
            if (this.tagsCurrent.length >= 3) {
                this.tagsCurrent.shift();
            }
            this.tagsCurrent.push(item.id);
        },

        // 获取标签 getlabel_chat
        async getlabel_chat() {
            const res = await getlabel_chat({});
            if (res.code == 1) {
                for (let item of res.data) {
                    item.checked = false;
                }
                this.tags.push(...res.data);
            }
        },

        // 处理组件返回数据
        getFileList(fileList) {
            console.log(fileList);
            this.images = [];
            for (let item of fileList) {
                this.images.push(item.response.data.fullurl);
            }
        },

        beforeUpload() {
            this.isUpload = true;
        },

        onSuccess(response, file, fileList) {
            this.isUpload = false;
            this.getFileList(fileList);
        },
        onRemove(file, fileList) {
            this.getFileList(fileList);
        },
        handlePictureCardPreview(file) {
            this.previewList = [file.url];
            this.$refs.myImg.showViewer = true;
        },
        change() {
            if (!localStorage.getItem("token")) {
                this.$message({
                    message: "请登录后操作",
                    type: "warning",
                });
                this.setloginShow(true);
                return;
            }
        },

        // 点击优惠券
        couponClick(item, index) {
            this.checkIndex = index;
        },

        async getCouponList() {
            const res = await getCouponList({
                status: 0,
                is_effective: 1,
            });
            if (res.code == 1) {
                let minIndex = null;
                for (let item of res.data.list) {
                    this.couponList.push(item);
                }
                if (this.couponList.length > 0) minIndex = 0;
                this.checkIndex = minIndex;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.new-coupon-list {
    padding-top: 4px;
    // padding-left: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .new-coupon-item {
        margin-top: 10px;
        margin-right: 10px;
        cursor: pointer;
        .no-s {
            width: 174px;
            height: 75px;
            display: block;
        }
        .active {
            // box-shadow: -5px 4px 10px 0 rgba($color: #ff7519, $alpha: 0.5);
            border: 1px dashed #ff7519;
        }
        .coupon-imgbox {
            position: relative;
            div {
                position: absolute;
                color: #fff;
                font-size: 9px;
                left: 93px;
                bottom: 23px;
            }
        }
        .big-img {
            width: 174px;
            height: 75px;
            position: relative;
            .s {
                position: absolute;
                left: -15px;
                top: -11px;
                width: 204px;
                height: 105px;
                display: block;
            }
            div {
                position: absolute;
                color: #fff;
                font-size: 9px;
                left: 93px;
                bottom: 23px;
            }
        }
    }

    .coupon-more {
        padding-left: 10px;
        font-weight: 400;
        font-size: 18px;
        color: #1c87f3;
        cursor: pointer;
    }
}
.ask {
    padding: 25px 20px;
    background: #ffffff;
    border-radius: 6px;
    margin-bottom: 13px;

    .cell-title {
        font-size: 18px;
        color: #020c17;
        margin-top: 25px;
    }
    .fff-cell {
        background-color: #ffffff;
        border-radius: 12px;
        padding: 20px 0;
    }

    .label {
        font-size: 14px;
        color: #333333;
        display: flex;
        align-items: center;
        .text1 {
            color: #666666;
            font-size: 12px;
        }
        .text2 {
            color: #ff2515;
            font-size: 12px;
        }
        img {
            width: 18px;
            height: 18px;
            margin-right: 7px;
        }
    }

    .ask-input {
        // margin-top: 14px;
    }

    .ask-but {
        margin-top: 14px;
        display: flex;
        justify-content: flex-end;
        .button {
            width: 253px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: linear-gradient(-90deg, #ff943f 5%, #ffca7a 140%);
            border-radius: 50px;
            font-size: 18px;
            color: #ffffff;
            cursor: pointer;
            &:hover {
                opacity: 0.9 !important;
            }
            &:active {
                opacity: 0.8 !important;
            }
        }
    }
    .h2 {
        font-size: 18px;
        color: #020c17;
        margin-top: 25px;
        span {
            font-size: 12px;
        }
    }
    .tags {
        margin-top: 5px;
        display: flex;
        flex-wrap: wrap;
        .tag {
            padding: 7px 16px;
            margin-right: 11px;
            background: #f8f8f8;
            font-size: 12px;
            font-weight: 400;
            font-size: 14px;
            color: rgba(2, 12, 23, 0.8);
            margin-top: 13px;
            cursor: pointer;
        }
        .tag-active {
            background: #edf4ff;
            color: #3489ff;
        }
    }

    .file-uploader {
        margin-top: 15px;
        &::v-deep .el-upload--picture-card {
            border: 1px solid #dedede;
            background: #fafafa;
            width: 80px;
            height: 80px;
            border-radius: 4px;
            line-height: 80px;
        }
        &::v-deep .el-upload-list--picture-card .el-upload-list__item {
            width: 80px;
            height: 80px;
            border-radius: 4px;
        }
    }
}

.ask-input ::v-deep .el-textarea__inner {
    width: 100%;
    height: 155px;
    background: #f6faff;
    border-radius: 6px;
    border: 1px solid #e4f0ff;
    padding: 16px 20px;
}

.ask-focus {
    animation: shakeTopx 1s;
    &::v-deep .el-textarea__inner {
        animation: inputBackground 1s;
    }
}

@keyframes shakeTopx {
    0%,
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
    }
    5% {
        -webkit-transform: rotate(0.5deg);
        transform: rotate(0.5deg);
    }
    10%,
    20%,
    30% {
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }
    15%,
    25%,
    35% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    40% {
        -webkit-transform: rotate(-0.5deg);
        transform: rotate(-0.5deg);
    }
    45% {
        -webkit-transform: rotate(0.5deg);
        transform: rotate(0.5deg);
    }
    50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes inputBackground {
    0%,
    100% {
        background: #f6faff;
    }
    5% {
        background: #e6f2ff;
    }
    10%,
    20%,
    30% {
        background: #f6faff;
    }
    15%,
    25%,
    35% {
        background: #e6f2ff;
    }
    40% {
        background: #f6faff;
    }
    45% {
        background: #e6f2ff;
    }
    50% {
        background: #f6faff;
    }
}
</style>
